<template>
	<view class="layout">
		<view class="content">
			<uni-forms ref="customForm" :modelValue="formData" label-width="85px">
				<uni-forms-item label="笔记标题" name="accessory">
					<uni-easyinput v-model="formData.note_name" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="笔记内容" name="accessory">
					<view class="editor-text" >
						<text @click="onEditorClick" class="edit-text">编辑笔记内容</text>
						<view class="editor-content">
							<u-parse :content="formData.comment"></u-parse>
						</view>
<!--						<view class="tip-text" v-html="formData.comment"></view>-->
					</view>
				</uni-forms-item>
				<uni-forms-item label="视频内容" name="accessory">
					<uni-file-picker file-mediatype="video" @select="onUploadFile" limit="9"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="签名" name="accessory">
					<u-button @click="onSignature" type="primary">签名</u-button>
				</uni-forms-item>
			</uni-forms>
			<view class="submit-btn">
				<u-button @click="onCancelClick">取消</u-button>
				<u-button @click="addNoteData" type="primary">保存</u-button>
			</view>
			<uni-popup ref="popup" background-color="#fff" >
				<view class="popup-content">
					<uniEditor :html="formData.comment" @getEditorText="getEditorText"></uniEditor>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.uploadUrl
	import {getMediaPath} from '@/api/note.js'
	export default {
		emits: ["onSubmit", "onCancel"],
		props: {
			result: {
				type: Object,
				default: ""
			}
		},
		watch: {
			result: {
				handler(val) {
					this.formData.note_name = val.noteName;
					this.formData.comment = val.comment;
					console.log(this.formData)
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				imgUrl:config.imgUrl1,
				formData: {
					note_name: "",
					comment: "<p>请输入笔记内容......</p>",
					video_url: [],
					sign_url: "",
					deviceId: this.$store.state.user.deviceId
				}
			}
		},
		methods: {
			//文件上传
			onUploadFile(e) {
				uni.uploadFile({
					url: baseUrl + '/upload/uploadPic',
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						let fileData = JSON.parse(res.data);
						getMediaPath({
							id: fileData.urlId[0]
						}).then(res => {
							this.formData.video_url.push(res.fileUrl.url)
						})
					}
				});
			},
			addNoteData() {
				this.formData.sign_url = this.$store.state.teach.sign
				this.$emit('onSubmit', this.formData);
			},
			onCancelClick() {
				this.$emit('onCancel');
			},
			onSignature() {
				this.$tab.navigateTo(`/pages/activity/signature`)
			},
			onEditorClick(){
				this.$refs.popup.open("top")
			},
			getEditorText(data){
				this.formData.comment = data;
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #fff;
		padding: 15px;
		border-radius: 10px;
		width: 80vw;
		height: 60vh;
		.editor-text{
			border:1px solid #eee;
			padding: 5px;
			border-radius: 4px;
			.edit-text{
				font-size: 12px;
				background: #3c96f3;
				padding: 5px;
				border-radius: 4px;
				margin-top: 5px;
				display: block;
				color:#fff;
			}
			.editor-content{
				height: 20vh;
				width: 100%;
				overflow-y: scroll;
			}
		}
		.submit-btn {
			display: flex;
			align-items: center;
			.u-button {
				margin: 0 10px;
			}
		}
	}
</style>
